<template>
  <div class="pwm-toolbar">
    <button @click="onClearLayout">clear layout</button>
    <span v-for="target in hiddenTargets" :key="target" @click="show(target)">
      hidden:{{ statusCenter.getLayoutComponent(target).params.title }}
    </span>
  </div>
</template>

<script lang="ts" setup>
import { store } from "./store";
import { reshowRemovedComponent } from "./status";
import { ref } from "vue";
import { statusCenter } from "../scripts/status";
const hiddenTargets = store.state.hiddenTargets;
const show = (targetID: string) => {
  reshowRemovedComponent(targetID);
};

const onClearLayout = () => {
  localStorage.setItem("layout", "");
  // console.log("Layout was cleared!")
};
</script>

<style scoped>
.pwm-toolbar {
  position: relative;
}

.pwm-contextmenu {
  position: absolute;
  z-index: 200;
  box-shadow: 10px 10px 5px grey;
  background-color: var(--pwm-background-color);
}
</style>
